import React, { useEffect, useState } from 'react';
import { connect } from 'umi'
import { List, message } from "antd";
// import PropTypes from 'prop-types';

import { reqCategoryName } from '../service'
import './styles.less'

function DetailList({ productDetail: { name, desc, price, imgs, pCategoryId, categoryId, detail }, BASE_URL_IMG }) {

  const [pCategoryName, setPCategoryName] = useState('')
  const [categoryName, setCategoryName] = useState('')

  useEffect(async () => {
    if (pCategoryId === '0') {
      // 一级分类下的商品
      try {
        const { status, msg, data } = await reqCategoryName({
          payload: {
            params: { categoryId }
          }
        })
        if (status === 0) {
          setPCategoryName(data.name)
        } else {
          message.error(msg)
        }
      }catch (e) {
        console.log(e);
      }
    }else {
      // 二级分类下的商品
      try {
        const results = await Promise.all([reqCategoryName({
          payload: {
            params: { categoryId: pCategoryId }
          }
        }), reqCategoryName({
          payload: {
            params: { categoryId }
          }
        }) ])
        if (results[0].status === 0 || results[1].status === 0 ) {
          // console.log(results[0].data);
          setPCategoryName(results[0].data.name || '')
          setCategoryName(results[1].data.name)
        }else {
          message.error(results[0].msg || results[1].msg)
        }
      }catch (e) {
        console.log(e);
      }
    }
  }, [])

  return (
    <List className="product-list">
      <List.Item >
        <div>
          <span className="left">商品名称</span>
          <span>{name}</span>
        </div>
      </List.Item>
      <List.Item>
        <div>
          <span className="left">商品描述</span>
          <span>{desc}</span>
        </div>
      </List.Item>
      <List.Item>
        <div>
          <span className="left">商品价格</span>
          <span>{price}元</span>
        </div>
      </List.Item>
      <List.Item>
        <div>
          <span className="left">商品分类</span>
          <span>{pCategoryName} --{'>'} {categoryName}</span>
        </div>
      </List.Item>
      <List.Item>
        <div>
          <span className="left">商品图片</span>
          {
            imgs.map((img) =>(
              <img
                key={img}
                className="product-img"
                src={`${BASE_URL_IMG}${img}`}
                alt="图片"
              />
            ))
          }
        </div>
      </List.Item>
      <List.Item>
        <div>
          <span className="left">商品详情</span>
          <span  dangerouslySetInnerHTML={{ __html: detail }} />
        </div>
      </List.Item>
    </List>
  );
}

export default connect(({ product, loading }) => ({
  ...product,
}))(DetailList);
